<!-- 与vue自带的component类似，但输入的值若非函数类型着直接转换成字符串输出 -->
<script lang="ts" setup>
import type { VNodeChild } from 'vue';

defineOptions({ name: 'BasicOrComponent' });

export type BasicType = number | string | boolean | symbol | bigint | null | undefined;

export type BasicOrComponentOpt = BasicType | (() => VNodeChild | BasicType | unknown) | unknown;

export interface BasicOrComponentProps {
  is?: BasicOrComponentOpt;
}

export interface BasicOrComponentEmits {
  (event: 'update:modelValue', data?: unknown): void;
}

const props = defineProps<BasicOrComponentProps>();

const isFnRender = computed(() => typeof props?.is === 'function');
</script>

<template>
  <template v-if="isFnRender">
    <component :is="is" />
  </template>
  <template v-else>
    {{ is }}
  </template>
</template>
